<template>
  <div class="car-models">
    <!-- 顶部搜索 -->
    <el-card class="box-card">
      <el-form ref="form" class="form" :model="form" label-width="80px">
        <div>
          <el-form-item label="车型编号:">
            <el-input v-model="form.name" class="input" />
          </el-form-item>
          <el-form-item label="车辆类型:">
            <el-input v-model="form.name" class="input" />
          </el-form-item>
        </div>
        <div>
          <el-form-item label="应载重量:">
            <el-select v-model="form.region" placeholder="请选择活动区域" class="input">
              <el-option label="区域一" value="shanghai" />
            </el-select></el-form-item>
          <el-button style="background-color: #f85d32; color: #fff;">搜索</el-button>
          <el-button>重置</el-button>
        </div>
        <el-form-item label="应载体积:">
          <el-select v-model="form.region" placeholder="请选择活动区域" class="input">
            <el-option label="区域一" value="shanghai" />
          </el-select></el-form-item>
      </el-form>
    </el-card>

    <!-- 车型列表 -->
    <el-card class="card">
      <el-button style="background-color: #f85d32; color: #fff;">新增车型</el-button>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="id" label="车型编号" />
        <el-table-column prop="name" label="车辆类型" />
        <el-table-column prop="num" label="车型数量" />
        <el-table-column prop="allowableLoad" label="应载重量（吨）" />
        <el-table-column prop="allowableVolume" label="应载体积（立方米）" />
        <el-table-column prop="measureLong" label="长（米）" />
        <el-table-column prop="measureLong" label="宽（米）" />
        <el-table-column prop="measureHigh" label="高（米）" />
        <el-table-column fixed="right" label="操作" width="280">
          <template>
            <el-button type="txet" size="mini">编辑</el-button>
            <el-button type="txet" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        style="text-align: center"
        :current-page.sync="pageInfo.page"
        :page-sizes="[5, 20, 30, 50]"
        :page-size.sync="pageInfo.pageSize"
        layout=" total,sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @current-change="getData"
        @size-change="getData"
      />
    </el-card>

    <!-- 弹窗 -->
    <add-car />
  </div>
</template>

<script>
import { vehiclePagination } from '@/api/vehicle'
import addCar from './components/addCar'
export default {
  name: 'CarModels',
  components: { addCar },
  data() {
    return {
      form: {
        name: '',
        region: ''
      },
      tableData: [],
      pageInfo: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await vehiclePagination(this.pageInfo)
      console.log(res)
      this.tableData = res.data.items
    }
  }
}
</script>

<style lang="scss" scoped>
.car-models {
  padding: 20px;
  // width: 1000px;
  .box-card {
    .form {
      display: flex;
      justify-content: space-between;
      .input {
        width: 410px;
      }
    }
  }
  .card{
    margin-top: 20px;
    .el-table-column{
      font-size: 12px;
    }
  }
}
</style>
